<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="/img/kurento.png" type="image/png">

  <!-- WebJars -->
  <link rel="stylesheet" href="/webjars/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/webjars/demo-console/index.css">
  <link rel="stylesheet" href="/webjars/ekko-lightbox/dist/ekko-lightbox.min.css">
  <script src="/webjars/jquery/dist/jquery.min.js"></script>
  <script src="/webjars/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/webjars/demo-console/index.js"></script>
  <script src="/webjars/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
  <script src="/webjars/webrtc-adapter/release/adapter.js"></script>

  <!-- Kurento -->
  <link rel="stylesheet" href="/css/kurento.css">
  <script src="/js/kurento-utils.min.js"></script> <!-- JAR from Maven -->
  <script src="/js/index.js"></script>

  <title>Kurento Java Tutorial - Hello World</title>
</head>

<body>
  <header>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-collapse"></button>
          <a class="navbar-brand" href=".">Kurento Tutorial</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="https://github.com/Kurento/kurento-tutorial-java/tree/master/kurento-hello-world">
                <span class="glyphicon glyphicon-file"></span>Source Code</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="page-header">
      <h1>Kurento Java Tutorial - Hello World (WebRTC in loopback)</h1>
      <p>
        This web application shows a <i>WebRtcEndpoint</i> connected to itself
        (loopback). Take a look to the <a href="/img/pipeline.png"
          data-toggle="lightbox" data-title="Hello World Media Pipeline"
          data-footer="WebRtcEnpoint in loopback">Media Pipeline</a>.
      </p>
      <p>
        To run this demo follow these steps:
      </p>
      <ol>
        <li>Open this page with a WebRTC-compliant browser (Chrome, Firefox, Safari).</li>
        <li>Click on <i>Start</i> to begin the stream negotiation.</li>
        <li>Grant access to the camera and microphone.</li>
        <li>Click on <i>Stop</i> to finish the test.</li>
      </ol>
    </div>
    <div class="row">
      <div class="col-md-5">
        <h3>Local stream</h3>
        <video id="uiLocalVideo" playsinline muted
            width="480px" height="360px" poster="/img/webrtc.png"></video>
      </div>
      <div class="col-md-2">
        <a id="uiStartBtn" href="#" class="btn btn-success">
          <span class="glyphicon glyphicon-play"></span>Start</a>
        <br>
        <br>
        <a id="uiStopBtn" href="#" class="btn btn-danger">
          <span class="glyphicon glyphicon-stop"></span>Stop</a>
      </div>
      <div class="col-md-5">
        <h3>Remote stream</h3>
        <video id="uiRemoteVideo" playsinline
            width="480px" height="360px" poster="/img/webrtc.png"></video>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <label class="control-label" for="console">Console</label>
        <br>
        <br>
        <div id="console" class="democonsole"><ul></ul></div>
      </div>
    </div>
  </div>

  <footer>
    <div class="foot-fixed-bottom">
      <div class="container text-center">
        <hr>
        <div class="row">&copy; 2018 Kurento</div>
        <div class="row">
          <div class="col-md-4">
            <a href="https://www.urjc.es/">
              <img src="/img/urjc.gif" height="50px"
                  alt="Universidad Rey Juan Carlos">
            </a>
          </div>
          <div class="col-md-4">
            <a href="https://www.kurento.org/">
              <img src="/img/kurento.png" height="50px" alt="Kurento">
            </a>
          </div>
          <div class="col-md-4">
            <a href="https://www.naevatec.com/">
              <img src="/img/naevatec.png" height="50px" alt="Naevatec">
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>
